<template>
  <div style="background-color: #f6f6f6;height:100vh;">
    <div>
      <button class="goBack" @click="goBack">
        <van-icon name="arrow-left" />
      </button>
      <div class="shpcar">
        待收货
      </div>
      <div class="edit">编辑</div>
    </div>
    <div style="margin: 10rem;">
      <div v-for="store in parsedItems" :key="store.storeName" class="caritem">
        <div>
          <span class="storename">{{ store.storeName }}</span>
        </div>
        <div v-for="item in store.items" :key="item.id" class="item">
          <van-card :num="item.num" :price="item.price" :title="item.title" :thumb="item.thumb" class="goodscard" />
          <div class="desc">
            <div v-for="(value, key) in item.desc" :key="key">
              {{ key }}: {{ value }}
            </div>
          </div>
        </div>
      </div>
      <div
        style="margin-top: 10rem;border-radius: 10rem;color: rgb(255 83 9);display: flex;justify-content: space-between;">
        <span>商家已发货</span>
        <span>7天无理由,极速退款</span>
      </div>
      <div class="receive-button" @click="confirmReceipt(store)">
        确认收货
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { Icon as VanIcon, Toast } from 'vant';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const items = ref([]);
const goBack = () => {
  router.push('/mine'); // 使用 router 对象的 go 方法返回上一页
};


import { useGwcStore } from '../stores/gwc'; // 确保路径正确

const gwcStore = useGwcStore();
const parsedItems = computed(() => gwcStore.groupCartItemsByStore());
// 解析传递的商品信息或从本地存储中获取
// const parsedItems = computed(() => {
//   try {
//     // 首先检查路由参数
//     const encodedPaymentData = route.query.paymentData;
//     if (encodedPaymentData) {
//       return JSON.parse(decodeURIComponent(encodedPaymentData));
//     }
//     // 如果路由参数没有商品信息，则从本地存储获取
//     const itemsString = localStorage.getItem('selectedItemsArchive');
//     if (itemsString) {
//       return JSON.parse(itemsString);
//     }
//     return [];
//   } catch (e) {
//     Toast('解析支付信息出错');
//     return [];
//   }
// });


const confirmReceipt = (store) => {
  // 在这里执行确认收货的操作，例如发送请求到服务器
  // 然后根据服务器的响应更新本地状态，例如删除已购买的商品
  // 然后跳转到订单列表页面
  Toast('已收货,评价一下吧');
  // router.push('/evaluated');
};

// 在组件加载时解析商品信息
onMounted(() => {
  items.value = parsedItems.value; // 将解析后的商品信息赋值给 items
  if (items.value.length === 0) {
    Toast('暂无订单信息');
  }
});
</script>

<style lang="less" scoped>
.goBack {
  position: absolute;
  top: 15px;
  /* 调整为合适的像素值 */
  left: 20px;
  /* 调整为合适的像素值 */
  background-color: rgba(255, 255, 255, 0);
  border: none;
  font-size: 14px;
  /* 调整为合适的像素值 */
}

.shpcar {
  width: 100%;
  height: 44rem;
  text-align: center;
  font-size: 20rem;
  line-height: 44rem;
  border-bottom: 1rem solid #d1cdcd;
  color: #6f6f6f;
}

.edit {
  position: absolute;
  right: 20rem;
  top: 10rem;
  color: #6f6f6f;
}

.caritem {
  background-color: #ffffff;
  height: auto;
  // border: 1rem solid #d1cdcd;
  margin-top: 5rem;
  padding-top: 10rem;
  position: relative;
  border-radius: 15rem;

  .item {
    position: relative;
  }

  .desc {
    position: absolute;
    left: 107rem;
    font-size: 12rem;
    color: #999;
    top: 43rem;
    display: flex;
    width: 220rem;
    flex-wrap: wrap;

    div {
      padding: 0 5rem;
    }
  }

  .storename {
    padding: 20rem;
  }
}

.van-card {
  background: white;
  border-radius: 10rem;
}

.receive-button {
  background-color: #ff4466;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

.receive-button:hover {
  background-color: #e02e49;
}
</style>
